<script setup lang="ts">

import {userNoticeApi} from "@/api/user-notice";
import type {UserNotice} from "@/api/user-notice/types.ts";
import {dateFormat, dateParse, renderIcon} from "@/utils";
import {useDictStore} from "@/stores";

const dictStore = useDictStore();
const userNoticeList = ref<UserNotice[]>([])
const userNoticeListLoading = ref(false)

onMounted(() => {
  dictStore.loadDict(['user-notice-read-status'])
  getList()
})

const getList = () => {
  userNoticeListLoading.value = true
  userNoticeApi.list({}).then(res => {
    userNoticeList.value = res.data
  }).finally(() => userNoticeListLoading.value = false)
}

const renderTimeText = (dateStr: string) => {
  let result = '';
  const date = dateParse(dateStr);
//   小于1分钟显示文本 刚刚
  if (date.getTime() > new Date().getTime() - 60 * 1000) {
    result = '刚刚';
  } else if (date.getTime() > new Date().getTime() - 60 * 60 * 1000) {
// 小于1小时显示文本 几分钟前
    result = `${Math.floor((new Date().getTime() - date.getTime()) / 1000 / 60)}分钟前`;
  } else if (date.getTime() > new Date().getTime() - 24 * 60 * 60 * 1000) {
// 小于24小时显示文本 几小时前
    result = `${Math.floor((new Date().getTime() - date.getTime()) / 1000 / 60 / 60)}小时前`;
  } else if (date.getTime() > new Date().getTime() - 7 * 24 * 60 * 60 * 1000) {
// 小于一周的显示文本 几天前
    result = `${Math.floor((new Date().getTime() - date.getTime()) / 1000 / 60 / 60 / 24)}天前`;
  } else {
// 显示具体时间 yyyy年MM月dd日
    result = dateFormat(date, 'yyyy年MM月dd日');
  }
  return result;
}
const handleClickNotice = (item: UserNotice) => {
  userNoticeApi.detail(item.noticeId).then(res => {
    const notice = res.data;
    item.readStatus = notice.readStatus
    window.$notification?.create({
      closable: true,
      keepAliveOnHover: true,
      type: notice.noticeType,
      avatar: notice.noticeIcon ? renderIcon(notice.noticeIcon) : undefined,
      title: notice.noticeTitle,
      content: notice.noticeContent,
      meta: notice.readTime,
      duration: 3000
    })
  })
}
</script>
<template>
  <n-card class="user-notice" w600px>
    <template #header>
      <n-space justify="space-between">
        <n-text>通知</n-text>
        <n-button text @click="getList">刷新</n-button>
      </n-space>
    </template>
    <n-spin :show="userNoticeListLoading">
      <n-scrollbar max-h400px>
        <n-list>
          <n-alert
              v-for="item in userNoticeList" :key="item.id"
              :type="item.noticeType"
              @Click="handleClickNotice(item)"
              border-rd-none
          >
            <template #header>
              <n-space justify="space-between">
                <n-text>{{ item.noticeTitle }}</n-text>
                <dict-tag dict-code="user-notice-read-status" :dict-value="item.readStatus"/>
              </n-space>
            </template>
            <template v-if="item.noticeType === 'default' && item.noticeIcon" #icon>
              <component :is="renderIcon(item.noticeIcon)"/>
            </template>
            <n-popover trigger="hover" content-style="padding: 0;">
              <template #trigger>
                <n-text tag="div" max-w240px text-ellipsis>{{ item.noticeDesc }}</n-text>
              </template>
              <span>{{ item.noticeDesc }}</span>
            </n-popover>
            <n-text font-size-3>{{ renderTimeText(item.noticePublishTime) }}</n-text>
          </n-alert>
        </n-list>
      </n-scrollbar>
    </n-spin>
  </n-card>
</template>
<style scoped>
</style>
